<!DOCTYPE html>
<html>
    <head>
        <title>Draggable & resizable - iPad</title>
        <script type="text/javascript" src="<?=base_url()?>assets/js/libs/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="<?=base_url()?>assets/js/libs/jquery.touch_box.min.js"></script>
		<script>
			$('.touch-box box-1').TouchBox({
			   resize: true,
			   drag: true,
			   callback_touches: function (touches) {
					alert("Touched");
				   //Touch added or removed from touches. Parameter is given with current touches
				   //this is DOM element, so using $(this) wil give you an jQuery element
			   },
			   callback_size_change: function (newWidth, newHeight) {
				   //User changed the size of the DOM element - this is DOM element, so using $(this) wil give you an jQuery element.
			   },
			   callback_position_change: function (newLeft, newTop) {
				   //User changed the position of the DOM element - this is DOM element, so using $(this) wil give you an jQuery element.
			   },
			   callback_degree_change: function (lastDegree, newDegree) {
				   //User changed the degrees of the DOM element - this is DOM element, so using $(this) wil give you an jQuery element.
			   }
		   });
		</script>
   </head>
    <body>
        <img src="http://jandaflowersandgifts.files.wordpress.com/2012/07/flower172.jpeg?w=714" width="150" height="150" class="touch-box box-1" data-resize="true" data-drag="true"/>
        <img src="http://jandaflowersandgifts.files.wordpress.com/2012/07/flower172.jpeg?w=714" width="150" height="150" class="touch-box box-2" data-drag="true" />
        <img src="http://jandaflowersandgifts.files.wordpress.com/2012/07/flower172.jpeg?w=714" width="150" height="150" class="touch-box box-3" data-rotate="true" />
        <img src="http://jandaflowersandgifts.files.wordpress.com/2012/07/flower172.jpeg?w=714" width="150" height="150" class="touch-box box-4" data-resize="true" data-drag="true" data-rotate="true" />
    </body>
</html>